<template>
  <div class="home-container flex-col">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>

      <div class="nav-head">
        <div class="nav-content flex-row-space-between">
          <img src="/static/assets/img/icon/icon-arrow-left.png" class="icon-back" @click="onClickBack"/>
          <div class="flex-col-v-center title">打卡记录</div>
          <div class="icon-back"></div>
        </div>
      </div>
    </div>

    <div class="table-container flex-col" :style="{'padding-top':titleH + statusH + 'px'}">
      <div class="h-10"></div>
      <div class="content-box">
        <div class="title">
          <div class="top flex-row-space-between">
            <div class="left">打卡记录</div>
            <div class="right flex-center" @click="onTapDelRecord">删除</div>
          </div>
          <div class="bottom flex-row-space-between">
            <div>时间</div>
            <div>{{record.processCreateTime}}</div>
          </div>
        </div>
        <div class="content">
          <div class="top flex-row-v-center">
            <div class="line"></div>
            <div class="right">类型</div>
          </div>
          <div class="item flex-row">
            <div class="label">{{record.processType}}</div>
            <div class="detail">
              <img :src="record.img_list_arr[0]"/>
              <img v-if="record.img_list_arr.length > 1" :src="record.img_list_arr[1]"/>
            </div>
          </div>
          <div class="item flex-row">
            <div class="label">详情</div>
            <div class="detail">
              {{record.content}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import global from "global";
  import Core from "core";
  import Common from "common";

  export default {
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,

        id: 0,
        record: {}
      }
    },

    onShow () {
      let id = this.$root.$mp.query['id']
      this.id = id
      this._getRecordDetail(id)
    },

    methods: {
      onClickBack () {
        Core.Util.goBack()
      },

      onTapDelRecord () {
        Core.Api.HospitalCard.delRecord(this.id)
          .then(res => {
            Core.Util.goBack()
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      _getRecordDetail (id) {
        Core.Api.HospitalCard.getRecordDetail(id)
          .then(res => {
            let record = res.record
            record.processCreateTime = Core.Util.timeFormat(record.create_time)
            if (record.type == 1) {
              record.processType = '服药'
            } else if (record.type == 2) {
              record.processType = '体温'
            } else if (record.type == 3) {
              record.processType = '医疗器械'
            }
            this.record = record
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .home-container {
    background: #f9f9f9;
    position: relative;
    width: 100%;
    height: 100%;

    .nav-bar {
      background: #ffffff;
      .nav-content {
        padding: 10px 12px;
        position: relative;
        z-index: 1;

        .icon-back {
          width: 20px;
          height: 20px;
        }

        .title {
          height: 18px;
          font-size: 19px;
          line-height: 20px;
          color:rgba(49,49,49,1);
        }
      }
    }

    .h-10 {
      height: 10px;
      background: #f5f5f5;
    }

    .table-container {
      width: 100%;
      height: 100%;
      background: #ffffff;

      .content-box {
        padding: 18px 14px;
        > .title {
          border-bottom: 1px solid rgba(147,147,147,0.3);
          .top {
            .left {
              font-size:16px;
              line-height: 16px;
              font-weight:bold;
              color:rgba(13,197,169,1);
            }
            .right {
              width:59px;
              height:21px;
              line-height: 21px;
              border:1px solid #FF7500;
              border-radius:10px;
              font-size: 14px;
              font-weight:400;
              color:#FF7500;
              background: #ffffff;
              margin-left: 14px;
            }
          }
          .bottom {
            padding: 18px 0;
            font-size:16px;
            line-height: 16px;
            color:rgba(49,49,49,1);
          }
        }

        > .content {
          padding: 21px 0;
          .top {
            .line {
              width:3px;
              height:13px;
              background:rgba(13,197,169,1);
              margin: 0 5px;
            }
            .right {
              padding: 0 6px;
              font-size:16px;
              font-weight:bold;
              color:rgba(49,49,49,1);
            }
          }
          .item {
            margin-top: 23px;
            .label {
              font-size:16px;
              line-height: 16px;
              color:rgba(49,49,49,1);
              width: 50px;
            }
            .detail {
              font-size: 14px;
              line-height: 14px;
              color:rgba(147,147,147,1);
              img {
                width: 105px;
                height: 105px;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
  }
</style>
